<template>
   <div class="xuesheng">
<!-- 上传文件区域 -->
        <div class="xuesheng1">
<el-button type="primary" @click="isshow=!isshow" class="btn">上传文件</el-button>

<el-dialog title="选择上传文件" :visible.sync="isshow">
 <span>班级:</span>
   <el-select v-model="datalist.classId" placeholder="请选择班级" @change="btn5()">
    <el-option
      v-for="item in banjilist" 
      :key="item.cid"
      :label="item.className"
      :value="item.cid">
    </el-option>
  </el-select><br>
 <span>课程:</span>
  <el-select v-model="datalist.courseId"  placeholder="请选择课程">
    <el-option
      v-for="item in kechenglist"
      :key="item.courseId"
      :label="item.courseName"
      :value="item.courseId">
    </el-option>
  </el-select><br>
  <span>文件类型:</span>
  <el-select v-model="datalist.type"  placeholder="选择文件类型">
    <el-option
      v-for="item in typelist"
      :key="item.status"
      :label="item.name"
      :value="item.status">
    </el-option>
  </el-select><br>
<!-- 文件上传 -->
<el-upload
  class="upload-demo" :limit="3" :multiple='true' :data="datalist" :headers="headers" :on-success="upFile"
  ref="upload"
  :action="url"
  :file-list="wenjianlist"
  :auto-upload="false">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <div slot="tip" class="el-upload__tip">选择小于3个文件</div>
</el-upload>
  <div slot="footer" class="dialog-footer">
    <el-button @click="isshow = false">取 消</el-button>
    <el-button type="primary"  @click="submitUpload">确 定</el-button>
  </div>
</el-dialog>
 </div>
<!-- 文件列表区域 -->
    <div class="xuesheng3">
    <template>
      <el-table ref="multipleTable"  :data="mettinglist" border tooltip-effect="dark"
    style="width: 100%">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="fileName"
      label="文件名称"
      width="400">
    </el-table-column>
    <el-table-column
    width="180"
      prop="createTime"
      label="上传时间"
      show-overflow-tooltip>
    </el-table-column>
     <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)"><a :href="xiazai">下载</a></el-button>
      </template>
    </el-table-column>
  </el-table>
  </template>
        </div>
   </div>
</template>

<script>
import { http,URL } from '@/uitl/request'
import { getToken } from '@/api/login'
export default {
    created(){
this.getshuju()
    },
    data(){
        return{
          user:{},
          isshow:false  ,
          kechenglist:[],
          typelist:[],
          datalist:{type:0,classId:0,courseId:0},
          wenjianlist:[],
           url:URL+'/file/uploadFile',
           headers:{ "token":getToken()},
           userin:this.$store.state.userinfo,
           mettinglist:[],
           xiazai:'',
           banjilist:[]
        }
    },
    methods:{
  async  btn5(){
    console.log(this.datalist.classId);
   const {data:res}=await http.get(`/class/findById/${this.datalist.classId}`)
  this.kechenglist=res.data.courseList
  return 
    },
//获取全部数据
async getshuju(){
try {
  if(this.userin.level < 1) {
    this.$message.error('权限不足')
    return
  }
     const {data:res}=await http.post(`/course/findCourseList/1/100`)
     //const {data:res}=await http.get(`/class/findById/1`)
    this.kechenglist=res.data.records
    const list2=await http.get('/file/getFileType')
    this.typelist=list2.data.data
    const list=await http.post(`/file/findFileList/${this.userin.uid}`)
   this.mettinglist=list.data.data
   const banji=await http.post('/class/getClassList')
this.banjilist=banji.data.data
  // console.log(list.data.data);
    
} catch (err) {
    Promise.reject(err)
}
},
submitUpload(){

     this.$refs.upload.submit();
},
//下载文件
 handleEdit(index,row){
 //   http://192.168.1.109:8090/file/downloadFile/${}
//this.xiazai=`http://192.168.1.109:8090/file/downloadFile/${row.fid}`
this.xiazai=URL+`/file/downloadFile/${row.fid}`
},
upFile(res){
this.$message({type:'success',message:res.data})
this.isshow=false
this.datalist={type:0,classId:this.$store.state.userinfo.cid,courseId:0}

}
    }
}
</script>

<style scoped>
.btn{
    float: left;
}
.xuesheng{
    line-height: 25px;
}
</style>